<template>
  <div class="home">
   <HeadNav></HeadNav>
   <div class="bodymain">
	   <SearchBar></SearchBar>
	  <CarouselImage></CarouselImage>
	  <HotGoods></HotGoods>
	  <div class="choise">好物精选</div>
	  <PopularProducts></PopularProducts>
   </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HeadNav from '../components/HeadNav.vue'
import CarouselImage from '../components/CarouselImage.vue'
import SearchBar from '../components/SearchBar.vue'
import HotGoods from '../components/HotGoods.vue'
import PopularProducts from '../components/PopularProducts.vue'

export default {
 
  components: {
    HeadNav,
	CarouselImage,
	SearchBar,
	HotGoods,
	PopularProducts
	
  }
}
</script>
<style>
	.bodymain{
		max-width: 1200px;
		margin: 0 auto; /* 水平居中 */
		
	}
	.choise{
	  font-size: 20px;
	  font-weight: bold;
	}
</style>
